<template>
    <MeModal title="选择行业" ref="industrySelectRef" width="820px">
      <n-tabs placement="left" style="max-height: 400px">
        <n-tab-pane v-for="l0 in industries.level0" :name="l0.label" :tab="l0.label">
          <n-scrollbar>
            <n-flex>
              <n-button v-for="l1 in industries.level1[l0.id]" @click="handleClickIndustry(l1)">{{ l1.label }}</n-button>
            </n-flex>
          </n-scrollbar>
        </n-tab-pane>
      </n-tabs>
  </MeModal>
</template>

<script setup>
import { industries } from '@/data'
import { MeModal } from '@/components'
import { useModal } from '@/composables'
const props = defineProps({
  onClickIndustry: {
    type: Function,
    default: () => {},
  },
})


const [industrySelectRef] = useModal({})

function open() {
    industrySelectRef.value.open({
  //关闭取消和确认按钮
    showCancel: false,
    showOk: false
  })
}

//点击时调用父组件方法，传递出industry_obj
function handleClickIndustry(industry_obj) {
  props.onClickIndustry(industry_obj)
  industrySelectRef.value.close()
}


// 暴露open
defineExpose({
  open,
})
</script>